<template>
  <el-card class="m-auto">
    <el-row class="template-row">
        <el-col :xl="12" :lg="12" :md="0" :sm="0" :xs="0" class="template-col">
          <div class="flex-center-box h-full italic text-4xl">
            <span>super--</span>
            <el-image style="width: 100px; height: 100px" :src="src('superMonkey.svg')"/>
            <span>&nbsp;--monkey</span>
          </div>
        </el-col>

        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="template-col">
          <TransitionGroup name="group" enter-active-class="animate__animated animate__backInRight absolute" leave-active-class="animate__animated animate__backOutLeft absolute">
            <Login v-show="type===1" key="login" @changeType="changeType"/>
            <Register v-show="type===2" key="register" @changeType="changeType"/>
          </TransitionGroup>
        </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import {src} from "@/utils";
import Login from './components/login.vue'
import Register from './components/register.vue'

const type = ref<number>(1),//1登录，2注册
    changeType = (v:number)=>{
  type.value=v
}
</script>
<style scoped lang="scss">
.el-card {
  width: 1024px;
  animation: fadeInUp 2s;

  :deep(.el-card__body) {
    padding: 0;

    .template-row {
      height: 576px;

      .template-col:first-of-type {
        background-image: linear-gradient(315deg, #2a3244, #ecf5ff, #7eb9f5);
        animation: fadeInBottomLeft 2s;
      }

      .template-col:last-of-type {
        padding: 10%;
        animation: fadeInTopRight 2s;
      }
    }
  }
}

@media (max-width: 1199px) {
  .el-card {
    width: 70%;

    .template-col:last-of-type{
      animation: fadeInDown 2s !important;
    }
  }
}
</style>
